<template>
	<div class="meizhuang comment">
		<div class="all_header">
            <img src="../../assets/img/back.png" alt="" @click="goBack">美妆专场
        </div>
        <div class="banner">
        	<img src="../../assets/img/active/meizhuang/banner.png"/>
        </div>
        <div class="banner-bar">
        	<img src="../../assets/img/active/meizhuang/baokuan.png"/>
        </div>
        <div class="tuijian-goods">
        	<div class="lists">
        		<div class="list-item mb5" v-for="(item,index) in chosedGoods" @click="goDetail(item.new_url)">
        			<img src="../../assets/img/active/meizhuang/beijing.png" class="beijing"/>
        			<div class="content">
        				<div class="goods" :class="{fl:index%2==0,fr:index%2!=0}">
        					<img :src="'http:'+item.thumb" style="width:80%"/>
	        			</div>
	        			<div class="goods-info"  :class="{fr:index%2==0,fl:index%2!=0}" >
	        				<div class="f22  f93e  mt10 mb15" :class="{'text-right':index%2==0,'text-left':index%2!=0}">{{item.cate}}</div>
	        				<div class="mb15">
	        					<span class="f12 cfff dec-bg " :class="{fr:index%2==0,fl:index%2!=0}">{{item.title.substring(0,11)}}...</span>
	        				</div>
	        				<div class="qianggou">
	        					<img src="../../assets/img/active/meizhuang/jiage.png"/>
	        					<span class="price">{{item.price}}</span>
	        				</div>
	        			</div>
        			</div>
        		</div>
        	</div>
        </div>
          <div class="banner-bar">
        	<img src="../../assets/img/active/meizhuang/baokuan.png"/>
        </div>
			 <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" @bottom-status-change="handleTopChange"
                     ref="loadmore">
        <div class="goods-lists">
        	<ul class="lists">
        		<li class="list-item" v-for="item in products"  @click="goDetail(item.new_url)">
        			<img src="../../assets/img/active/meizhuang/goods-back.png"/>
        			<div class="content">
        				<img :src="'http:'+item.thumb" class="goods"/>
        				<div class="liji">
        					<span class="f12 c999 text-decoration origin-price">原价{{(item.price*1.4).toFixed(2)}}</span>
        					<img src="../../assets/img/active/meizhuang/linji.png"/>
        					<span class="price">{{Math.floor(item.price)}}<span class="f14">{{getNumber(item.price)}}</span></span>
        				</div>
        			</div>
        		</li>
        	</ul>
			<div slot="bottom" class="mint-loadmore-bottom">
                <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↑</span>
                <span v-show="topStatus === 'loading'">Loading...</span>
            </div>
        </div>
		 </mt-loadmore>
	</div>
</template>

<script>
	import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'
	export default {
        data() {
        	return {
				topStatus: '',
				 currentPage: 1,
				 products: [],
				class_id:this.$route.query.class_id,
				apiName: this.$route.query.taoqinggouName,
				allLoaded: false,
				chosedGoods:[]
        	}
		},
		created(){
			 window.scrollTo(0,0);
			this.getGoods()
		},
         methods:{
        	goBack() {
                this.$router.goBack();
			},
			getNumber(price){
				let pri=price+''
				if(pri.indexOf('.')>0){
					 pri=pri.split('.')[1]
					return '.'+pri
				}
			},
			getGoods(){
                let url=API.taotejia+this.apiName;
                let form=new FormData()
                    form.append('cate',this.class_id)
                     form.append('page',this.currentPage)
                  this.$http.post(url,form,
                  {
                       headers: {'Content-Type': 'application/x-www-form-urlencoded,multipart/form-data'}
                  }
                  ).then(
                (res) => {
                    console.log(res.body.data)
                    if (res.body.code==1) {
						if(this.currentPage==1){
							 this.products=res.body.data.result; 
							 this.chosedGoods=this.products.slice(this.products.length-4,this.products.length-1)
							 console.log(this.chosedGoods)
						}else{
                                    this.products = this.products.concat(res.body.data.result);
						}
						 
					}else if(res.body.code==13){
						this.allLoaded=true;
					}
					 else {
                        Layer.showMsg("获取列表失败！");
                    }
                },
                (error) => {
                    Layer.showMsg("服务器开小差了...")
                    return
                }
            )

			},
			 goDetail(url )
			 {
                    plus.runtime.openURL(url,function(){
						 plus.runtime.openURL(url);
					},'com.taobao.taobao');

			},
			  loadTop() {
                // 加载更多数据
                this.switch(this.menuIndex + '');
                this.resetIndex();
                this.$refs.loadmore.onTopLoaded();
            },
            loadBottom() {
                // 加载更多数据
                this.addRecord(this.menuIndex + '');
                this.$refs.loadmore.onBottomLoaded();
            },
            handleTopChange(status) {
                this.topStatus = status;
			},
			 addRecord(sortEnum) {
                    let url = API.serviceDomain + API.productArray;
                      this.nextIndex();
                    this.getGoods()
			},
			 nextIndex() {
                this.currentPage = this.currentPage + 1;
            },
        }
   }
</script>

<style>
	@import url("./all.css");
</style>